<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import { usePagination } from "@/hooks/usePagination"
import { getApprovalDataApi, updateApprovalApi } from "@/api/approval"
import { ElMessage, type UploadProps, type TabsPaneContext } from "element-plus"
import { Plus } from "@element-plus/icons-vue"
import { formatDateTime } from "@/utils"
defineOptions({
  name: "recommend"
})
const activeName = ref("no")
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
// 表格数据
const tableData = ref<any>([])
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const STATE = ref<number>(2)
const currentId = ref<any>(undefined)
const loading = ref<boolean>(false)
const imageUrl = ref<string>("")
const form = reactive<any>({
  withdrawals_card_name: "", // 银行卡姓名
  withdrawals_card_id: "", // 银行卡号
  withdrawals_bank: "", // 开户行
  withdrawals_time: "",
  withdrawals_retail_level: "",
  withdrawals_monthly_sales: "",
  withdrawals_shipment_success: "",
  withdrawals_activation_success: "",
  withdrawals_money: "",
  withdrawals_state: "",
  withdrawals_img: "", // 图片
  withdrawals_remark: "",
  withdrawals_user_name: "", // 名字
  withdrawals_user: ""
})
const getTableData = () => {
  loading.value = true
  getApprovalDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    withdrawals_type: 2, // 推广佣金
    withdrawals_state: STATE.value
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
      console.log(res, "数据")
    })
    .catch(() => {
      tableData.value = []
    })
}
// 结算审批
const addTx = (row: any) => {
  dialogVisible.value = true
  currentId.value = row.id
  form.withdrawals_card_name = row.withdrawals_card_name // 银行卡姓名
  form.withdrawals_card_id = row.withdrawals_card_id // 银行卡号
  form.withdrawals_bank = row.withdrawals_bank // 开户行
  form.withdrawals_time = formatDateTime(row.withdrawals_time)
  form.withdrawals_retail_level = row.withdrawals_retail_level
  form.withdrawals_monthly_sales = row.withdrawals_monthly_sales
  form.withdrawals_shipment_success = row.withdrawals_shipment_success
  form.withdrawals_activation_success = row.withdrawals_activation_success
  form.withdrawals_money = row.withdrawals_money
  form.withdrawals_img = row.withdrawals_img // 图片
  form.withdrawals_remark = row.withdrawals_remark
  form.withdrawals_user_name = row.withdrawals_user_name
  form.withdrawals_user = row.withdrawals_user
}
// 确定提现
const addQd = () => {
  updateApprovalApi({
    id: currentId.value,
    withdrawals_card_name: form.withdrawals_card_name,
    withdrawals_card_id: form.withdrawals_card_id,
    withdrawals_bank: form.withdrawals_bank,
    withdrawals_time: form.withdrawals_time,
    withdrawals_retail_level: form.withdrawals_retail_level,
    withdrawals_monthly_sales: form.withdrawals_monthly_sales,
    withdrawals_shipment_success: form.withdrawals_shipment_success,
    withdrawals_activation_success: form.withdrawals_activation_success,
    withdrawals_money: form.withdrawals_money,
    withdrawals_user_name: form.withdrawals_user_name,
    withdrawals_user: form.withdrawals_user,
    withdrawals_state: 4,
    withdrawals_img: imageUrl.value.replace(/\+/g, "$cg$"),
    withdrawals_remark: form.withdrawals_remark
  }).then((res: any) => {
    console.log(res)
    ElMessage.success("审批成功")
    getTableData()
  })
  dialogVisible.value = false
}
// 取消
const resetForm = () => {
  dialogVisible.value = false
  form.withdrawals_img = ""
  form.withdrawals_remark = ""
  imageUrl.value = ""
}

// 详情弹出框
// 查看详情按钮
// #region
const ruleForm = reactive<any>({})

//查看详情
const handleClick = (row: any) => {
  // console.log(row)
  dialogVisible1.value = true
  ruleForm.withdrawals_account_name = row.withdrawals_account_name
  ruleForm.withdrawals_retail_level = row.withdrawals_retail_level
  ruleForm.withdrawals_monthly_sales = row.withdrawals_monthly_sales
  ruleForm.withdrawals_shipment_success = row.withdrawals_shipment_success
  ruleForm.withdrawals_activation_success = row.withdrawals_activation_success
  ruleForm.withdrawals_money = row.withdrawals_money
  ruleForm.withdrawals_card_name = row.withdrawals_card_name
  ruleForm.withdrawals_card_id = row.withdrawals_card_id
  ruleForm.withdrawals_bank = row.withdrawals_bank
  ruleForm.withdrawals_img = row.withdrawals_img
  ruleForm.withdrawals_remark = row.withdrawals_remark
  ruleForm.withdrawals_user_name = row.withdrawals_user_name
}

//tabs切换
const handleTabsClick = (tab: TabsPaneContext) => {
  if (tab.paneName === "no") {
    STATE.value = 2
  } else {
    STATE.value = 4
  }
  getTableData()
}
/**图片上传 */

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("大小不能大于2MB!")
    return false
  }
  return true
}
const event = ref<any>()
const onChange = (file: any) => {
  event.value = event.value || window.event
  file = event.value.target.files[0]
  const reader = new FileReader()
  //转base64
  reader.onload = function (e: any) {
    imageUrl.value = e.target.result //将图片路径赋值给src
  }
  reader.readAsDataURL(file)
}
const handleAvatarSuccess: UploadProps["onSuccess"] = (response: any, uploadFile: any) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

/** 监听分页参数的变化 */

watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })

// 下载
// const handleXZ = (row: any) => {
//   console.log(row, "下载")
//   updategetOrderCenterApiXZ({ orderList: row.order_list?.split(",") }).then((res: any) => {
//     console.log(res, "点击下载的按钮")
//     const blob = new Blob([res.data], {
//       type: "application/xlsx;charset=utf-8"
//     })
//     // console.log(res)
//     const downloadElement = document.createElement("a")
//     const href = window.URL.createObjectURL(blob)
//     downloadElement.href = href
//     downloadElement.download = "订单.xlsx"
//     document.body.appendChild(downloadElement)
//     downloadElement.click()
//     window.URL.revokeObjectURL(href)
//   })
// }
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabsClick">
        <el-tab-pane label="未审批" name="no" />
        <el-tab-pane label="已审批" name="yes" />
      </el-tabs>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="70px">
          <template #default="{ $index }">
            {{ (paginationData.currentPage - 1) * paginationData.pageSize + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="时间" width="180" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.withdrawals_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="withdrawals_user_name" label="账户名" align="center" />
        <!-- <el-table-column prop="withdrawals_retail_level" label="分销等级" align="center" /> -->
        <!-- <el-table-column prop="withdrawals_monthly_sales" label="月销量" align="center" />
        <el-table-column prop="withdrawals_shipment_success" label="发货成功量" align="center" />
        <el-table-column prop="withdrawals_activation_success" label="激活成功数量" align="center" /> -->
        <el-table-column prop="withdrawals_money" label="结佣金额" align="center" />
        <el-table-column prop="withdrawals_state.state" label="提现状态 " align="center" />
        <el-table-column prop="name" label="操作" align="center" width="250">
          <template #default="scope">
            <el-button text type="primary" @click="addTx(scope.row)" v-if="scope.row.withdrawals_state.code == 2"
              >审批</el-button
            >
            <el-button text type="primary" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            <!-- <el-button text type="primary" size="small" @click="handleXZ(scope.row)">下载</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 审批框 -->
    <el-dialog v-model="dialogVisible" width="30%" @close="resetForm">
      <el-form :model="form" label-width="120px">
        <el-form-item label="银行卡姓名">
          <el-input v-model="form.withdrawals_card_name" disabled />
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input v-model="form.withdrawals_card_id" disabled />
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="form.withdrawals_bank" disabled />
        </el-form-item>
        <el-form-item label="提现金额">
          <el-input v-model="form.withdrawals_money" disabled />
        </el-form-item>
        <!-- 反馈图片 -->
        <el-form-item label="结款凭证">
          <el-upload
            class="avatar-uploader"
            action="#"
            accept="image/*"
            :auto-upload="false"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-change="onChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.withdrawals_remark" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-form-item>
          <el-button type="primary" @click="addQd"> 确定 </el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </div>
    </el-dialog>
    <!-- 详情弹出框 -->
    <el-dialog v-model="dialogVisible1" :model="ruleForm" title="详细信息" width="50%">
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="120px">
        <el-form-item prop="job" label="账户名">
          <el-input v-model="ruleForm.withdrawals_user_name" disabled />
        </el-form-item>
        <!-- <el-form-item prop="num" label="分销等级">
          <el-input v-model="ruleForm.withdrawals_retail_level" disabled />
        </el-form-item> -->
        <!-- <el-form-item prop="education" label="月销量">
          <el-input v-model="ruleForm.withdrawals_monthly_sales" disabled />
        </el-form-item>
        <el-form-item prop="exp" label="发货成功量">
          <el-input v-model="ruleForm.withdrawals_shipment_success" disabled />
        </el-form-item>
        <el-form-item prop="team" label="激活成功数量">
          <el-input v-model="ruleForm.withdrawals_activation_success" disabled />
        </el-form-item> -->
        <el-form-item prop="sex" label="提现金额">
          <el-input v-model="ruleForm.withdrawals_money" disabled />
        </el-form-item>
        <el-form-item prop="maxAge" label="银行卡姓名">
          <el-input v-model="ruleForm.withdrawals_card_name" disabled />
        </el-form-item>
        <el-form-item prop="minAge" label="银行卡号">
          <el-input v-model="ruleForm.withdrawals_card_id" disabled />
        </el-form-item>
        <el-form-item prop="note" label="开户行">
          <el-input v-model="ruleForm.withdrawals_bank" disabled />
        </el-form-item>
        <!-- 打款图片 -->
        <!-- <el-form-item prop="image" label="打款图片"> -->
        <!-- <img :src="ruleForm.withdrawals_img" alt="" width="200" height="200" /> -->
        <!-- <el-image :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')" /> -->
        <!-- <el-image
            :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')"
            style="width: 100px; height: 100px; cursor: pointer"
            @click="dialogVisible2 = true"
          /> -->
        <!-- </el-form-item> -->
        <!-- 打款图片 -->
        <el-form-item prop="image" label="打款图片">
          <el-image
            v-if="ruleForm.withdrawals_img !== ''"
            :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')"
            style="width: 100px; height: 100px; cursor: pointer"
            @click="dialogVisible2 = true"
          />
          <el-empty v-else :image-size="200" />
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="ruleForm.withdrawals_remark" disabled />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" :model="ruleForm" width="50%" @close="dialogVisible2 = false">
      <el-image v-if="ruleForm.withdrawals_img !== ''" :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')" />
      <el-empty v-else :image-size="200" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.set-popper {
  max-width: 500px;
}
.set-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btn {
  display: flex;
  justify-content: flex-end;
}
.pager-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
